<template>
  <el-row>
    <el-calendar v-model="value" style="width: 500px;height: 400px;">
        <template #date-cell="{ data }">
          <p @click="toNote(data)">
            {{ data.day.split('-').slice(2).join('-') }}
          </p>
        </template>
      </el-calendar>
    <el-col :span="12">
      <el-switch v-model="showWordText" />
      <div v-if="showWordText">
        <el-input type="textarea" v-model="words"></el-input>
      </div>
      <div v-else>
        <el-link v-for="value in linkValues" :href="value" style="margin: 10px;">{{ value }}</el-link>
      </div>
    </el-col>
  </el-row>
</template>
<script>


export default {
  data() {
    return {
      value: new Date(),
      words: 'JS,java,css,jquery,react,vue,element,element-plus',
      showWordText: false,
    }
  },
  computed: {
    linkValues() {
      return this.words.split(",");
    },
  },
  methods: {

    toNote(data) {
      window.open('https://note.ms/day' + data.day.replaceAll("-", ''))
    },
    openCalender() {
      this.showCalender = true
      this.showWordText = true
    },
    openPanel(e) {
      console.log(e);
      this.note = 'https://note.ms/' + e
      this.showCalender = false
      this.showWordText = false
    }
  }
}
</script>

<style></style>